<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>兑换奖励</title>
		<script type="text/javascript" src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js">
		</script>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.fl{
				float: left;
			}
			.clearfix{
				display: block;
				content: "";
				clear: both;
			}
			.box_bgc{
				background: #CCCCCC;
				height: 200px;
				padding-bottom: 10px;
			}
			.top{
				position: relative;
				background: white;
				height: 200px;
			}
			.text{
				width: 33%;
				text-align: center;
				padding: 0.133333rem;
				box-sizing: border-box;
				font-size: 12px;
				color: #777777;
			}
			.text p:nth-of-type(2){
				color: black;
			}
			.text p{
				margin-top: 20px;
			}
			.text span{
				font-size: 28px;
			}
			.liner1,.liner2{
				width: 1px;
				height: 100px;
				background: #ccc;
				position: absolute;
				top: 0.16rem;
				left: 3.2rem;
			}
			.liner2{
				left: 6.533333rem;
			}
			.min{
				width: 100%;
				text-align: center;
				color: #ccc;
				position: absolute;
				top: 2rem;
			}
		</style>
	</head>
	<body>
		<div class="box_bgc">
			<div class="top clearfix">
				<div class="text fl">
					<p>今天上课</p>
					<p><span>0</span>&nbsp;分钟</p>
				</div>
				<div class="text fl">
					<p>获得积分</p>
					<p><span>0</span>&nbsp;分</p>
				</div>
				<div class="text fl">
					<p>高于平台</p>
					<p><span>0%</span>&nbsp;学员</p>
				</div>
				<div class="liner1"></div>
				<div class="liner2"></div>
				<div class="min">
					再上100分钟可获100积分
				</div>
			</div>
		</div>
		
	</body>
</html>
